<template>
    <div class="addTendder" :style="!uploadedSuccessfully?'background: #ffffff;box-shadow: 0 0 3px #a5a5a5;':''">
        <div class="addTender">添加</div>
        <!-- 招标公告 -->
        <div v-show="!uploadedSuccessfully" class="tenderAnnouncement">
            <el-form ref="form" style="display: flex;justify-content: space-between" :model="form" label-width="80px">
            <span class="spanRed">*</span>
            <el-form-item size="mini" class="qualificationWidth" label="招标公告">
                <el-select v-model="form.itemIntroduction" placeholder="请选择招标公告">
                </el-select>
            </el-form-item>
            <span class="spanRed">*</span>
            <el-form-item size="mini" class="qualificationWidth" label="公司名称">
                <el-input v-model="form.companyName"></el-input>
            </el-form-item>
            </el-form>
        </div>
        <!-- 保证金是否缴纳 -->
        <div v-show="!uploadedSuccessfully" class="tenderAnnouncement">
            <el-form ref="form" style="display: flex;justify-content: space-between" :model="form" label-width="120px">
                <span class="spanRed">*</span>
                <el-form-item size="mini" class="qualificationWidth" label-width="80px" label="联系电话">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <span class="spanRed">*</span>
                <el-form-item size="mini" label="保证金是否缴纳">
                    <el-radio v-model="radio" label="0">是</el-radio>
                    <el-radio v-model="radio" label="1">否</el-radio>
                </el-form-item>
            </el-form>
        </div>
        <!-- 营业执照 -->
        <div v-show="!uploadedSuccessfully" class="tenderAnnouncement">
            <el-form ref="form" style="display: flex;justify-content: space-between" :model="form" label-width="80px">
                <span class="spanRed">*</span>
                <el-form-item label="营业执照">
                    <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
        </div>
        <!-- 标书上传 -->
        <div v-show="!uploadedSuccessfully" class="tenderAnnouncement">
            <el-form ref="form" style="display: flex;justify-content: space-between" :model="form" label-width="80px">
            <span class="spanRed">*</span>
            <el-form-item size="mini" class="qualificationWidth" label="标书上传">
                <!-- <el-input v-model="form.name"></el-input><input class="tenderUpload" type="file"/> -->
                <!-- <el-button type="primary" size="mini" class="tenderUpload" plain>标书上传</el-button> -->
                <!-- <el-upload
                class="tenderUpload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="mini" type="primary">标书上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload> -->
                <!-- <div class="uploadFile">上传文件</div> -->
                <el-button type="primary" size="mini" class="uploadFile" plain>标书上传</el-button>
                <input class="tenderUpload" type="file" @change="tenderUploadEvent"/>
            </el-form-item>
            </el-form>
        </div>
        <!-- 公司资质上传 -->
        <div v-show="!uploadedSuccessfully" class="tenderAnnouncement">
            <el-form  :model="form" label-width="180px">
                <span class="spanQualification">*</span>
                <el-form-item style="display: flex;flex-direction: column" label="公司资质上传(不限数量)">
                    <div class="pictureScroll">
                        <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!-- 确定与取消 -->
        <div v-show="!uploadedSuccessfully" class="tenderAnnouncement" style="display: flex;justify-content: center">
            <!-- <img :src="tenderWord"/> -->
            <el-form>
                <el-form-item>
                    <el-button style="width: 130px" @click="updataNo()">取消</el-button>
                    <el-button style="width: 130px" type="primary" @click="updataOK()">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 确认对话框 -->
        <div v-show="uploadedSuccessfully" class="confirmationDialogBox">
            <div class="uploadedSuccessfully">上传成功</div>
            <div class="cancelConfirm">
                <el-button size="mini" style="width: 130px" @click="updataDownEvent(0)">取消</el-button>
                <el-button size="mini" style="width: 130px" type="primary" @click="updataDownEvent(0)">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            form: {
                itemIntroduction: '',
                companyName: '',
                phone: '',
                isPayMoney:'',
                licensePictureUrl:'',
                pictureUrl:''
            },
            radio: '0',
            imageUrl: '',
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            companyQualificationImag:'',
            companyVisible: false,
            companydisabled: false,
        }
    },
    computed:{
    },
    methods:{
        updataNo(){
            
        },
        handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            console.log(file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        // handleRemove(file, fileList) {
        //     // console.log("删除");
        //     console.log(file, fileList);
        // },
        // handlePreview(file) {
        //     console.log(file);
        // },
        // handleExceed(files, fileList) {
        //     this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        // },
        // beforeRemove(file, fileList) {
        //     return this.$confirm(`确定移除 ${ file.name }？`);
        // }
        tenderUploadEvent(e){
            // let file = e.target.files[0]
            // file.value = ""
            // // 只支持word格式
            // if(file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'){
            //     this.$message.success("文件类型通过")
            //     let reader = new FileReader();
            //     reader.readAsDataURL(file);                    
            //     reader.onload = function(e) {
            //         this.tenderWord = this.result
            //     };
            // }else {
            //     return this.$message("您选择的文件类型不正确")
            // }
        }
    }
}
</script>

<style lang="less" scoped>
.addTendder{
    width: 600px;
    height: auto;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .tenderAnnouncement{
        width: calc(100% - 50px);
        height: auto;
        display: flex;
        justify-content: start;
        padding-left: 50px;
        position: relative;
        top: 10px;
    }
}

.addTendder::-webkit-scrollbar{
    width:0
}

.spanRed{
    position: relative;
    left: 10px;
    top: 5px;
    color: red
}

.spanQualification{
    color: red;
    position: relative;
    left: 10px;
    top: 25px;
}

.qualificationWidth{
    width: 260px;
}

.margin{
    width: 370px;
}

.uploadFile{
    width: 80px;
    height: 30px;
    cursor: pointer;
}

.tenderUpload{
    width: 80px;
    height: 30px;
    position: relative;
    left: -80px;
    top: -2px;
    opacity: 0;
}

.addTender{
    width: calc(100% - 20px);
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    // font-weight: bold;
    font-size: 20px;
    background: #409EFF;
    color: #FFFFFF;
}

.el-upload-list__item-thumbnail{
    width: 100px;
    height: 100px;
}

.pictureScroll{
    width: 515px;
    height: 160px;
    overflow-y: scroll;
    position: relative;
    left: -160px;
}

.confirmationDialogBox{
    width: 300px;
    height: 150px;
    background: #FFFFFF;
    .uploadedSuccessfully{
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cancelConfirm{
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>